<template>
	<view>
		<view class="box" style="margin-top: 10px;">
			<view class="head">
				电池ID：
			</view>
			<view class="input-box">
				<input placeholder="请输入" @input="id" v-model="cId" />
			</view>
		</view>

		<view class="box" style="margin-top: 10px;">
			<view class="head">
				电池容量：
			</view>
			<view class="input-box">
				<input placeholder="请输入" @input="name" v-model="cCap" />
			</view>
		</view>

		<view class="box" style="margin-top: 10px;">
			<view class="head">
				电池其他：
			</view>
			<view class="input-box">
				<input placeholder="请输入" @input="other" v-model="cOther" />
			</view>
		</view>

		<view class="updata" @click="pull()">录入</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	export default {
		data() {
			return {
				cCap: '',
				cId: '',
				cOther: '',
			}
		},
		onLoad() {
			const msg = {
				type: 2,
				data: 'G'
			}
			store.commit("setSendMsg", msg)
		},
		computed: {
			msg() {
				return store.state.rfidMsgo
			}
		},
		watch: {
			msg: {
				deep: true,
				handler() {
					this.cId = store.state.rfidMsgo.id
				}
			}
		},
		methods: {
			name: function(e) {
				this.cCap = e.target.value
			},
			id: function(e) {
				this.cId = e.target.value
			},
			other: function(e) {
				this.cOther = e.target.value
			},
			pull() {
				// 存入数据库
				if (this.cId != '' && this.cCap != '' && this.cPosition != '') {
					uni.request({
						url: 'http://192.168.9.33/library/addBook.php',
						data: {
							id: this.cId,
							name: this.cCap,
							other: this.cOther
						},
						header: {
							'content-type': 'application/json',
						},
						method: 'GET',
						sslVerify: false,
						success: (res) => {
							console.log(res)
							if (res.data == 1) {
								uni.showToast({
									title: '录入成功',
									icon: "none",
									position: "bottom"
								})
								this.cId = ''
								this.cCap = ''
								this.cOther = ''
							} else {
								uni.showToast({
									title: '录入失败',
									icon: "none",
									position: "bottom"
								})
							}
						},
						fail: (res) => {
							console.log(res);
						}

					})
				} else {
					uni.showToast({
						title: '参数有误，不能为空',
						icon: "none",
						position: "bottom"
					})
				}
			}
		}
	}
</script>

<style>
	.box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.head {
		width: 20%;
		margin-right: 3%;
	}

	.input-box {
		width: 200px;
		height: 30px;
		line-height: 50px;
		border: 0.5px solid #2c313c;
		border-radius: 10px;
	}

	.btn {
		margin-top: 10px;
		width: 50%;
		height: 30px;
		background-color: yellow;
		border: 0.5px solid #2c313c;
	}

	.updata {
		margin-top: 30px;
		text-align: center;
		background-color: aquamarine;
		height: 50px;
		line-height: 50px;
		border: 0.5px solid rgb(0, 0, 0);
	}
</style>
